<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>右側欄</title>

<link rel="stylesheet" href="../css/sunny/fontsize1.1/jquery-ui-1.10.4.custom.css">
	
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>

<style>

body {
	padding: 0;
	margin: 0;
	text-align: center;
}

label {
	display: inline-block;
	width: 5em;
	line-height: 24px; 
	font-size: 18px; 
	font-family: '微軟正黑體';
}

input.text {
	margin-bottom: 12px;
	width: 210px;
	padding: .4em;
	font-size: 14px;
	font-family: '微軟正黑體';
}

</style>

<script>
	$(function() {
		$(".buttonClass").button();
		$('#loginid').click(function(){
			window.parent.parent.$(".afterlogin").show();
		});
		$("#forgetpassword").click(function() {
			alert("使用者按下忘記密碼鍵");
		});
		$("#opensignup").click(function() {
			window.parent.parent.$('#signup').dialog('open');
		});
	});

</script>

</head>

<body>
		<h1 style="margin-bottom:50px;">歡迎來到<br/>ChatChatCat</h1>
		<p>
			<label for="username">帳號：</label><input id="username" type="text"
				name="username" placeholder="請輸入帳號"
				class="text ui-widget-content ui-corner-all">
		</p>
		<p style="position: relative;"><label for="password">密碼：</label><input id="password"
			type="password" name="pwd"
			placeholder="請輸入密碼"
			class="text ui-widget-content ui-corner-all">
		</p>
		<p style="margin-top:25px;">
		<a href="RightSideBarAfterLogIn.html" id="loginid" class="buttonClass" style="position:absolute; left: 75px; font-size:22px;">登入</a>
		<a href="#" id="forgetpassword" class="buttonClass" style="position:absolute; top: 410px; left: 120px; font-size:14px;">忘記密碼</a>
		<a href="#" id="opensignup" class="buttonClass" style="position:absolute; top:410px; left: 50px; font-size: 14px;">註冊</a>
		</p>

</body>

</html>
